<template>
	<el-dialog
        v-model="visible"
        title="数据权限"
        :close-on-click-modal="false"
        :width="600"
        draggable>
		<el-form
            ref="dataFormRef"
            :model="dataForm"
            label-width="120px"
            @keyup.enter="onSubmit()">
			<el-form-item prop="name" label="名称">
				<el-input
                    v-model="dataForm.name"
                    placeholder="请输入名称"
                    disabled>
                </el-input>
			</el-form-item>
			<el-form-item prop="dataScope" label="数据范围">
				<el-select
                    v-model="dataForm.dataScope"
                    placeholder="数据范围"
                    style="width: 100%">
                    <el-option label="全部数据" :value="0" />
                    <el-option label="本机构及子机构数据" :value="1" />
                    <el-option label="本机构数据" :value="2" />
                    <el-option label="本人数据" :value="3" />
                    <el-option label="自定义数据" :value="4" />
                </el-select>
			</el-form-item>
			<el-form-item
                v-show="dataForm.dataScope == 4"
                label="数据权限">
				<el-tree
                    ref="orgListTree"
                    :data="orgList"
                    :props="{ label: 'name', children: 'children' }"
                    node-key="id"
                    accordion show-checkbox>
                </el-tree>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="onSubmit()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus/es'
import { roleStore } from '@/store/role'
import { orgStore } from '@/store/org'

const useRoleStore = roleStore()
const useOrgStore = orgStore()

const visible = ref(false) // 对话框可见性
const dataFormRef = ref(null) // 表单引用
const dataForm = reactive({
    name: '',
    dataScope: 0, // 默认数据范围为全部数据
    orgIdList: [] // 选中的机构ID列表
})

const orgList = ref([]) // 机构列表数据
const orgListTree = ref()
// 初始化数据
const init = async(id) => {
    visible.value = true
    dataForm.id = ''

    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields()
    }

    // 获取机构菜单树
    try {
        const res = await useOrgStore.getOrgList()
        orgList.value = res || []
    } catch (error) {
        ElMessage.error('获取菜单数据失败')
    }
    // 初始化 就是清空选中的机构ID列表
    if (orgListTree.value) { 
        orgListTree.value.setCheckedKeys([]) 
    }
    // 初始化机构树
    await initOrgListTree(id)
}

const initOrgListTree = async(id) => {    
    const role = await useRoleStore.getRoleOne(id)
    if (role) { // 如果找到角色信息
        Object.assign(dataForm, role) // 将角色信息赋值给表单数据
        nextTick(() => { // 异步更新表单数据
            if (dataForm.orgIdList) {
                orgListTree.value.setCheckedKeys(dataForm.orgIdList)
            } else {
                orgListTree.value.setCheckedKeys([])
            }
        }) 
    } else { // 如果没有找到角色信息
        ElMessage.error('角色不存在') // 提示错误信息
        visible.value = false // 关闭弹窗
    }
}


const onSubmit = () => {    
	dataForm.orgIdList = orgListTree.value.getCheckedKeys()
    // 验证表单
    dataFormRef.value.validate(async valid => {
        if (valid) {
            // 提交表单数据
            console.log('提交的数据:', dataForm)
            // 关闭对话框
            visible.value = false
        } else {
            console.log('验证失败')
            return false
        }
    })
}
defineExpose({ init })
</script>